<template>
  <div class="order_wrap">
    <div class="order_nav">
      <div class="left_wrap" :class="`active${orderIndex}`">
        <p class="purchase_into" @click="tabActive(0)">Buy order</p>
        <p class="sale" @click="tabActive(1)">Sell order</p>
      </div>
      <div class="date_wrap" @click="selectDate">
        <span>{{showDate}}</span>
        <i class="iconfont icon-rili"></i>
      </div>
    </div>
    <div class="purchase" @scroll="toggleHead" ref="dataBox">
      <ul class="purchase_list">
        <li class="public_none_data" v-if="!purchaseList.length && isRequest">No data</li>
        <li class="purchase_item" v-for="(item, index) in purchaseList" :key="index">
          <div class="item_title">
            <div class="left_wrap">
              <div class="img_wrap">
                <img :src="item.avatar" alt="">
              </div>
              <span class="name">{{item.username}}</span>
            </div>
            <div class="right_wrap">
              <span class="time">{{item.time}}</span>
              <span class="public_s_btn" v-if="orderIndex === 1 && item.type === 1" @click="cancel(index, item.id)">withdraw</span>
            </div>
          </div>
          <div class="price_wrap">
            <div class="amount">
              <span class="price_option number">{{item.xxm_num}}</span>
              <span>Quantity(YTCC)</span>
            </div>
            <div class="amount">
              <span class="price_option price">{{item.xxm_price}}</span>
              <span>Unit Price(CNY)</span>
            </div>
            <div class="amount">
              <span class="price_option total">{{item.rmb}}</span>
              <span>Total price(CNY)</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'order',
  data () {
    return {
      purchaseList: [],
      orderIndex: this.$route.query.orderIndex ? parseFloat(this.$route.query.orderIndex) : 0,
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true // Do you have more data?
    };
  },
  beforeMount () {
    this.getData();
  },
  watch: {
    showDate (val, oldVal) {
      if (val === 'This month') return false;
      this.page = 1;
      this.isRequest = false;
      this.hasMoreData = true;
      this.purchaseList = [];
      this.getData();
    }
  },
  computed: {
    showDate () {
      if (!this.$store.state.date.selectResult[1]) {
        return 'This month';
      } else {
        return `${this.$store.state.date.selectResult[0]}-${this.$store.state.date.selectResult[1]}`;
      }
    },
    startTime () {
      if (!this.$store.state.date.selectResult[1]) {
        return `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
      } else {
        return this.$store.state.date.selectResult.join('-');
      }
    }
  },
  methods: {
    // Rolling events
    toggleHead (e) {
      let withBottomScroll = document.querySelector('.purchase_list').clientHeight - (this.$refs.dataBox.clientHeight + this.$refs.dataBox.scrollTop);
      if (withBottomScroll < 50 && this.canRequest && this.hasMoreData) {
        this.getData();
      }
    },
    selectDate () {
      this.$store.commit('configDateWrap');
    },
    tabActive (num) {
      this.orderIndex = num;
      this.$router.replace({path: 'order', query: {orderIndex: num}});
      this.page = 1;
      this.isRequest = false;
      this.hasMoreData = true;
      this.purchaseList = [];
      this.getData();
    },
    // Withdrawal of order
    cancel (index, id) {
      this.Modal('Withdrawal of order', 'Are you sure you want to withdraw the order?', ['cancel', 'Sure'], () => {
        this.axios.post('index/Tradinghall/sell_withdraw', {
          ids: id
        }).then(({data}) => {
          if (data.status === 200) {
            this.Toast('Revocation of success');
            this.purchaseList.splice(index, 1);
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // get data
    getData () {
      this.canRequest = false;
      this.axios.post('index/tradinghall/sell_from', {
        type: this.orderIndex + 1,
        page: this.page,
        time: this.startTime
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          let resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          }
          this.purchaseList = this.purchaseList.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .order_wrap{
    // flex: 1;
    height: 100%;
    margin-top: 20px;
    background-color: #f5f5f5;
    .order_nav{
      width: 100%;
      height: 88px;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
      padding: 0 30px;
      .left_wrap{
        height: 100%;
        font-size: 28px;
        color: #666;
        display: flex;
        align-items: center;
        position: relative;
        >p{
          height: 100%;
          line-height: 88px;
        }
        &::after{
          display: block;
          content: '';
          width: 114px;
          height: 4px;
          background-color: $color;
          position: absolute;
          bottom: 0;
          transition: left .3s linear;
        }
        &.active0::after{
          content: '';
          left: 8px;
        }
        &.active1::after{
          content: '';
          left: 192px;
        }
        .purchase_into{
          margin-right: 56px;
        }
      }
      .date_wrap{
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #666;
        .iconfont{
          margin-left: 14px;
          font-size: 30px;
          color: #282828;
        }
      }
    }
    .purchase{
      height: calc(100% - 108px);
      overflow-y: auto;
      width: 100%;
      padding: 30px 30px 0;
      .purchase_list{
        width: 100%;
        position: relative;
        .purchase_item{
          width: 100%;
          border-radius: 10px;
          background-color: #fff;
          margin-bottom: 20px;
          .item_title{
            width: 100%;
            height: 94px;
            padding: 0 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            .left_wrap{
              display: flex;
              align-items: center;
              .img_wrap{
                width: 64px;
                height: 64px;
                border-radius: 50%;
                margin-right: 14px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .name{
                font-size: 28px;
                color: #666;
              }
            }
            .right_wrap{
              .public_s_btn{
                margin-left: 16px;
              }
              .time{
                font-size: 24px;
                color: #999;
              }
            }
          }
          .price_wrap{
            width: 100%;
            padding: 38px 0 36px 0;
            display: flex;
            .amount{
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 24px;
              color: #999;
              .price_option{
                font-size: 30px;
                font-weight: 600;
                margin-bottom: 24px;
                &.number{
                  color: #282828;
                }
                &.price{
                  color: $color;
                }
                &.total{
                  color: #fe6e3a;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
